<template>
  <h1>this is great parent</h1>
  {{ title }}
  <input type="text" v-model="title">
  <SecondComp></SecondComp>
</template>

<script>
import SecondComp from "../components/SecondComp";
import {provide, reactive, ref, toRefs} from "vue";

export default {
  name: "RootApp",
  components: {
    SecondComp
  },
  setup() {
    let title = ref('root data')
    let obj = reactive({
      name: 'ojbk',
      age: 30
    })
    provide("title", title)
    provide('user', obj)
    return {
      title,
      ...toRefs(obj)
    }
  }
  /*
    data() {
      return {
        title: 'root data'
      }
    },
  */
  //这种方式只能在本组件响应式，在子孙组件中不行
  /*
    provide() {
      return {
        title: this.title
      }
    }
  */
}
</script>

<style scoped>

</style>
